<template>
  <!-- 图片类型文件上传列表 -->
  <view class="png_list">
    <view class="item" v-for="(item, index) in imgList" :key="index">
      <image :src="item" mode="aspectFill" class="img_item" @click="preview(item, index)" :style="'height: ' + imgHeight + 'px'"></image>
      <image v-if="showClose" class="close" src="/static/img/resource/del.svg" mode="aspectFill" @click="remove(index)"></image>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    imgList: {
      type: Array,
      default: () => []
    },
    showClose: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      imgHeight: 0
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.calcImgHeight();
  },
  methods: {
    calcImgHeight() {
      uni
        .createSelectorQuery()
        .select('.img_item')
        .boundingClientRect(res => {
          //最外层盒子节点
          this.imgHeight = res.width;
        })
        .exec();
    },
    remove(index) {
      uni.showModal({
        content: '确定移除该图片吗？',
        success: res => {
          if (res.confirm) {
            this.$emit('remove', index);
          }
        }
      });
    },
    preview(item, index) {
      uni.previewImage({
        current: index,
        urls: this.imgList,
        indicator: 'number',
        longPressActions: {
          success: function(data) {
            // console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
          },
          fail: function(err) {
            console.log(err.errMsg);
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.png_list {
  // display: flex;
  // justify-content: space-between;
  .item {
    display: inline-block;
    width: calc(100% / 3 - 28rpx);
    margin: 36rpx 0 0 28rpx;
    position: relative;
    display: inline-block;
    .img_item {
      width: 100%;
      border-radius: 12rpx;
    }
    .close {
      position: absolute;
      top: -14rpx;
      right: -14rpx;
      width: 28rpx;
      height: 28rpx;
    }
  }
  .item:nth-child(3n + 1) {
    margin-left: 0;
  }
}
</style>
